﻿@page "/datagrid/virtual-mask-row"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the DataGrid component with virtual mask row. Scroll the vertical scrollbars to view the DataGrid content with mask row.</p>
</SampleDescription>
<ActionDescription>
    <p>The DataGrid UI Mask row virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. Here, same set of DOM elements is re-used to improve the performance. In this feature, a loading placeholder indicator was shown while loading the new data.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" Height="410" RowHeight="38"  EnableVirtualMaskRow="true" EnableVirtualization="true" >
                <GridPageSettings PageSize="30"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" Width="170"></GridColumn>
                   <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<Order> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = Order.GetAllRecords();
    }
}
